<template>
    <view class="details">
        <SRV-topbar :title="info.title" isLeft="true"></SRV-topbar>
        <view class="top">
            <view class="li">
                <view style="color: #0000ff;">总期数</view>
                <view class="liNum blue">{{info.totalNum}}</view>
            </view>
            <view class="li">
                <view style="color: #fc02ff;">已领取</view>
                <view class="liNum green">{{info.useNum}}</view>
            </view>
            <view class="li">
                <view style="color: #f90808;">待领取</view>
                <view class="liNum red">{{info.waitNum}}</view>
            </view>
        </view>
        <view class="toplist" v-if="info.drawInfo.state">
            <view class="title">{{info.drawInfo.title}}</view>
            <view class="heng"></view>
            <view class="topnav">
                <view class="goods2" v-for="(item,index2) in info.drawInfo.productList" :key="index2">
                	<image :src="item.picture" mode=""></image>
                    <view style="width: 68vw;">
                        <view class="goods2_line">
                            <view class="line_name">
                                <text>{{item.name}}</text>
                            </view>
                        </view>
                        <view class="goods_num1">
                            <view class="goods2_line">
                                <text class="price_name state_1">会员价</text>
                                <text class="sale_price">￥{{item.cost_price}}</text>
                            </view>
                            <view class="uni-numbox">
                                <view class="uni-numbox-minus" :class="disableSubtract ? '' : 'uni-numbox-disabled'"
                                    @click="_calcValue('subtract', index2)">-</view>
                                <input class="uni-numbox-value" type="number" :value="numList[index2]" disabled="true">
                                <view class="uni-numbox-plus" :class="disableAdd ? '' : 'uni-numbox-disabled'"
                                    @click="_calcValue('add', index2)">+</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view>
                <view class="goods_bot" @click="subOpen()">立即领取</view>
            </view>
        </view>
    </view>
</template>

<script>
    var _self;
    import serve from '../../static/request.js';
    import storage from '../../static/appkey.js';
    import common from '../../static/jump.js';
    export default {
        data() {
            return {
                type: '',
                info: {},
                numList: [],
            }
        },
        methods: {
            getInfo() {
                serve.request({
                    url: '/store/draw/draw-info',
                    data:  {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        type: _self.type
                    },
                    v: '/v3'
                }).then(res => {
                    if(res.code != 200) {
                        uni.showToast({
                            title: res.message,
                            icon: 'none',
                            success() {
                                setTimeout(function() {
                                    common.jump('return_one')
                                }, 2000)
                            }
                        });
                    }
                    _self.info = res.data;
                    if(_self.info.drawInfo.state == 1) {
                        _self.info.drawInfo.productList.forEach((item2, key2) => {
                            _self.numList[key2] = 0;
                        });
                    }
                });
            },
            _calcValue(type, key2) {
                let value = this.numList[key2];
                let step = 1;
                let max = this.info.waitNum;
                if (type === 'subtract') {
                    value -= step
                } else if (type === 'add') {
                    value = parseInt(Number(value) + Number(step))
                }
                if (value < 0 || value > max) {
                    return
                }
                this.numList[key2] = value;
                console.info(this.numList);
                this.$forceUpdate();
            },
            subOpen() {
                let num = 0;
                let item = _self.info.drawInfo;
                var data = '[';
                var drawType = item.title;
                var isSel = false;
                item.productList.forEach((item, key) => {
                    if(this.numList[key] <= 0) {
                        return false;
                    }
                    num = Number(num) + this.numList[key];
                    if(isSel && key > 0) {
                        data += ',';
                    }
                    data += '{"dataId":'+item.sku_id+',"dataNum":'+this.numList[key]+'}';
                    isSel = true;
                });
                data += ']';
                console.info(data);
                if(num > this.info.waitNum) {
                    uni.showToast({
                    	title: "不能超过待领取的次数",
                    	icon: 'none'
                    })
                    return;
                }
                if(num == 0) {
                    uni.showToast({
                    	title: "请选择赠品",
                    	icon: 'none'
                    })
                    return;
                }
                this.jump('addOrder', 'type=level_gift&data='+data);
            },
            jump(jump_type, jump_link){
            	common.jump(jump_type, jump_link);
            }
        },
        onLoad(options) {
			_self = this;
            _self.type = options.type || 0;
            _self.getInfo();
        },
        onPullDownRefresh() {
            _self.getInfo();
        }
    }
</script>

<style scoped lang="scss">
    .details {
        width: 100%;
        padding-bottom: 50rpx;
        .top{
        	position: relative;
        	width:100%;
        	height:200rpx;
        	display: flex;
            justify-content: center;
            align-items: center;
        	font-size:24rpx;
        	color:rgba(255,255,255,1);
        	background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/forceDetail_bg.png);
        	background-size: 100% 100%;
        	background-repeat: no-repeat;
            .li {
                width: 33vw;
                text-align: center;
                font-size: 38rpx;
            }
            .liNum {
                height: 80rpx;
                line-height: 80rpx;
                width: 80rpx;
                margin-left: 32%;
                margin-top: 20rpx;
                border-radius: 50%;
                font-size: 40rpx;
            }
            .red {
                border: 1px solid #f90808;
                color: #f90808;
            }
            .green {
                border: 1px solid #fc02ff;
                color: #fc02ff;
            }
            .blue {
                border: 1px solid #0000ff;
                color: #0000ff;
            }
        }
        .toplist {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            padding: 30upx 0upx 20upx 0upx;
            border-bottom: 16upx #eee solid;
        
            .title {
                height: 24upx;
                margin-left: 30upx;
                padding-left: 20rpx;
                position: relative;
                float: left;
                font-size: 30upx;
                // text-align: center;
                line-height: 24upx;
                font-weight: bold;
            }
            .title::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 6upx;
                height: 24upx;
                background: rgba(255, 198, 0, 1);
                border-radius: 2upx;
            }
            .more {
                width: 130upx;
                height: 30upx;
                margin-right: 10upx;
                position: relative;
                float: right;
                font-size: 30upx;
                text-align: center;
                line-height: 24upx;
                font-weight: bold;
            }
            .topnav {
                display: flex;
                box-sizing: border-box;
                // padding-bottom: 30upx;
                // border-bottom: 16upx rgba(251, 251, 253, 0.8) solid;
                flex-wrap: wrap;
                width: 100%;
        
                .list {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 25%;
                    padding: 20rpx 0;
                    color: #23345B;
                    font-size: 24upx;
        
                    image {
                        width: 98upx;
                        height: 97upx;
                    }
                }
        		.goods2 {
        			width: 98vw;
        		    padding-bottom: 30rpx;
        		    border: 6rpx solid #eaeaea;
        		    margin: 10rpx 1% 0 1%;
        		    padding: 10rpx 4rpx;
        		    text-align: center;
        		    border-radius: 10rpx;    
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    
        			image {
        				width: 200upx;
        				height: 200upx;
        		        border: 1rpx solid #eee;
        				border-radius: 2%;
        			}
        			.line_name{
        				font-size:30upx;
        				line-height: 50upx;
        				color: #333;
        				text-overflow: -o-ellipsis-lastline;
        				overflow: hidden;
        				text-overflow: ellipsis;
        				display: -webkit-box;
        				-webkit-line-clamp: 2;
        				-webkit-box-orient: vertical;
        			}
        			.goods2_line{
        		        text-align: center;
        			}
        		    .price_name {
        		        font-size: 28rpx;
        		        text-align: right;
        		    }
        		    .sale_price {
        		        font-size: 42rpx;
        		        color: #e61d07;
        		    }
        		    .cost_price {
        		        text-align: right;
        		        // padding-right: 20rpx;
        		        font-size: 26rpx;
        		        color: #615555;
        		    }
        		}
            }
        }
        .goods_num1 {
            padding: 0rpx 30rpx 20rpx 30rpx;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
            font-size: 32upx;
            .uni-numbox {
                width: 32%;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                border: 1upx solid rgba(60, 72, 104, 0.1);
                border-radius: 32upx;
                overflow: hidden;
            }
        
            .uni-numbox-minus,
            .uni-numbox-plus {
                margin: 0;
                background-color: #f9f9f9;
                width: 50upx;
                height: 60upx;
                line-height: 60upx;
                text-align: center;
                color: #555555;
            }
            .uni-numbox-value { 
                background-color: #ffffff;
                width: 60upx;
                height: 60upx;
                border-right: 1upx rgba(60, 72, 104, 0.06) solid;
                border-left: 1upx rgba(60, 72, 104, 0.06) solid;
                text-align: center;
            }
            .uni-numbox-disabled {
                color: #c0c0c0;
            }
            .uni-numbox-activity {
                width: 80upx;
                height: 60upx;
                text-align: right;
                margin-top: 10rpx;
            }
        }
        .heng{
            border-bottom: 1rpx #eaeaea solid;
            width: 100vw;
            margin-top: 50rpx;
        }
        .goods_bot{
            margin-top: 20rpx;
            width: 100vw;
            height: 80rpx;
        	line-height: 80rpx;
        	text-align: center;
        	text-align: center;
        	color: #ffffff;
        	background-color: #eccf2a;
        	font-size: 36rpx;
        	border-top: 1rpx rgba(0, 0, 0, 0.1) solid;
        	box-shadow: 1rpx 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.1);
            letter-spacing: 10rpx;
        }
    }
</style>
